﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
    string urls = "";
    List<Model.T_Pic> pic_list = (List<Model.T_Pic>)ViewData["Piclist"];
    var GetPicDomin = System.Configuration.ConfigurationManager.AppSettings["Pic_Domin"];
    if (pic_list != null && pic_list.Count > 0)
    {
        var b = from o in pic_list select o.Url;
        urls = string.Join(",", b.ToArray());
    }
}
<script src="~/Content/js/dialog/dialog.js"></script>
<script src="~/Content/js/common.js"></script>
<script src="~/Content/js/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
    var GetPicDomin = "@GetPicDomin";
    var keyValue = $.request("keyValue");
    //$(function () {
    //    $(":button").click(function () {
    //        ajaxFileUpload();
    //    })
    //})
    function ajaxFileUpload() {
        $.ajaxFileUpload
        (
            {
                url: '/PicUpload/Upload', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: 'file1', //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    $("#img1").attr("src", GetPicDomin + data.imgurl);
                    $("#Pic").val(data.imgurl);
                    if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
        return false;
    }
</script>



<script>
    $(function () {
        $("#Province").change(function () {
            var Parent = $(this).val();
            if ($("#City").find("option").length > 0) {
                $("#City").empty();
            }
            if ($("#AreaQu").find("option").length > 0) {
                $("#AreaQu").empty();
            }
            GetCity(Parent);
        });
        $("#City").change(function () {
            var Parent = $(this).val();
            if ($("#AreaQu").find("option").length > 0) {
                $("#AreaQu").empty();
            }
            GetQu(Parent);
        });
        initControl();
        if (!!keyValue) {
            $.ajax({
                url: "/Shop/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    data.SetUpTime = new Date(data.SetUpTime).format("yyyy-MM-dd");
                    data.OpenStartTime = new Date(data.OpenStartTime).format("hh:mm");
                    data.OpenEndTime = new Date(data.OpenEndTime).format("hh:mm");
                    $("#img1").attr("src", GetPicDomin + data.Pic);
                    if (data.IsOpen == "1") {
                        $("#rd_Open").click();
                    }
                    else {
                        $("#rd_NotOpen").click();
                    }


                    if (data.IsShow == "1") {
                        $("#rd_Show").click();
                    }
                    else {
                        $("#rd_NotShow").click();
                    }
                    $("#Province").val(data.Province);
                    $("#Province").change();
                    $("#City").val(data.City);
                    $("#City").change();
                    $("#AreaQu").val(data.AreaQu);
                    $("#form1").formSerialize(data);
                }
            });
        }
        initPicBox();
    });
    function initControl() {
        //var arr;
        //$("#MovieRegion").bindSelect({
        //    url: "/Movie/GetT_MovieZone",
        //    id: "MoveZoneName",
        //    text: "MoveZoneName"
        //});
        $.ajax({
            url: "/ItemsType/GetChildListByParentID",
            data: { keyValue: "00000000-0000-0000-0000-000000000000" },
            dataType: "json",
            async: false,
            success: function (data) {
                $("#Province").append("<option></option>");
                $.each(data, function (i) {
                    $("#Province").append($("<option></option>").val(data[i].id).html(data[i].text));
                });
            }
        });
    }
    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        $("#HD_IsShow").val($("input[name='IsShow']:checked").val());
        $("#HD_IsOpen").val($("input[name='IsOpen']:checked").val());
        $.submitForm({
            url: "/Shop/SubmitForm?keyValue=" + keyValue,
            param: $("#form1").formSerialize(),
            success: function () {
                $.currentWindow().$("#gridList").trigger("reloadGrid");
            }
        })
    }

    function GetCity(tem) {
        $.ajax({
            url: "/ItemsType/GetChildListByParentID",
            data: { keyValue: tem },
            dataType: "json",
            async: false,
            success: function (data) {
                $("#City").append("<option></option>");
                $.each(data, function (i) {
                    $("#City").append($("<option></option>").val(data[i].id).html(data[i].text));
                });
            }
        });
    }
    function GetQu(tem) {
        $.ajax({
            url: "/ItemsType/GetChildListByParentID",
            data: { keyValue: tem },
            dataType: "json",
            async: false,
            success: function (data) {
                $("#AreaQu").append("<option></option>");
                $.each(data, function (i) {
                    $("#AreaQu").append($("<option></option>").val(data[i].id).html(data[i].text));
                });
            }
        });
    }

</script>
<form id="form1">
    <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">基本信息</a></li>
            @*<li ><a href="#">扩展信息</a></li>*@
        </ul>
        <div style="padding-top: 20px; margin-right: 30px;">
            <table class="form">
                <tr>
                    <th class="formTitle">店面名称</th>
                    <td class="formValue">
                        <input id="ShopName" name="ShopName" type="text" class="form-control required" placeholder="店面名称" />
                    </td>
                    <th class="formTitle">开业时间</th>
                    <td class="formValue">
                        <input id="SetUpTime" name="SetUpTime" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" placeholder="开业时间" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">经度</th>
                    <td class="formValue">
                        <input id="Lng" name="Lng" type="text" class="form-control" placeholder="经度" maxlength="11" />
                    </td>
                    <th class="formTitle">纬度</th>
                    <td class="formValue">
                        <input id="Lat" name="Lat" type="text" class="form-control" placeholder="纬度" maxlength="11" />
                    </td>
                </tr>
                <tr><td colspan="4"><span class="glyphicon glyphicon-map-marker fa-2x" aria-hidden="true" style="cursor: pointer;margin-left:90px;" title="点击选择经纬度" onclick="SelectMap();"></span></td></tr>
                <tr>
                    <th class="formTitle">营业开始时间</th>
                    <td class="formValue">
                        <input id="OpenStartTime" name="OpenStartTime" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker({ dateFmt: 'HH:mm' })" placeholder="营业开始时间" />
                    </td>
                    <th class="formTitle">营业结束时间</th>
                    <td class="formValue">
                        <input id="OpenEndTime" name="OpenEndTime" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker({ dateFmt: 'HH:mm' })" placeholder="营业结束时间" />
                    </td>
                </tr>
                <tr>

                    <th class="formTitle">手机端是否显示</th>
                    <td class="formValue">
                        <div class="rdio">
                            <input id="rd_Show" name="IsShow" type="radio" value="1"><label for="rd_Show">显示</label>
                        </div>
                        <div class="rdio">
                            <input id="rd_NotShow" name="IsShow" type="radio" value="0"><label for="rd_NotShow">不显示</label>
                        </div>
                        <input type="hidden" id="HD_IsShow" />
                    </td>

                    <th class="formTitle">是否营业</th>
                    <td class="formValue">
                        <div class="rdio">
                            <input id="rd_Open" name="IsOpen" type="radio" value="1"><label for="rd_Open">营业</label>
                        </div>
                        <div class="rdio">
                            <input id="rd_NotOpen" name="IsOpen" type="radio" value="0"><label for="rd_NotOpen">不营业</label>
                        </div>
                        <input type="hidden" id="HD_IsOpen" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                        地址
                    </th>
                    <td class="formValue" colspan="3">
                        <textarea id="Address" name="Address" class="form-control" style="height: 80px;" maxlength="100"></textarea>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                        店面简介
                    </th>
                    <td class="formValue" colspan="3">
                        <textarea id="Details" name="Details" class="form-control" style="height: 100px;" maxlength="250"></textarea>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                        联系电话
                    </th>
                    <td class="formValue" colspan="3">
                        <input id="Tel" name="Tel" type="text" class="form-control required" placeholder="联系电话" maxlength="15" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">区域</th>
                    <td class="formValue" colspan="3">
                        <select id="Province" name="Province" class="form-control" style="width: 120px; float: left;"></select>
                        <select id="City" name="City" class="form-control" style="width: 120px; float: left;margin-left:10px;"></select>
                        <select id="AreaQu" name="AreaQu" class="form-control" style="width: 120px; float: left; margin-left: 10px; "></select>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">店面封面</th>
                    <td class="formValue" colspan="2">
                        <img id="img1" width="380" height="190" />
                        <input type="file" id="file1" name="file1" style="display:none;" onchange="ajaxFileUpload();" />
                    </td>
                    <td>
                        <button type="button" class="btn btn-success" style="margin-right: 50px;float:right;" onclick="UpdateSinglePic();">上传封面图片</button>
                        <input type="hidden" id="Pic" name="Pic">
                    </td>

                </tr>
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                    </th>
                    <td class="formValue" colspan="3">
                        <div class="row">
                            <div class="col-xs-2">
                                <button type="button" class="btn btn-success" onclick="OpenWindow();">上传内页展示图</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <div class="row" id="imgs">

                @{
                    if (pic_list != null)
                    {
                        for (int i = 0; i < pic_list.Count; i++)
                        {
                            <div class="col-xs-6 col-md-3">
                                <img flag="group4" flag1="@i" src="@(GetPicDomin + pic_list[i].Url)" alt="" class="img-thumbnail" style="width:400px; height:200px;" />
                                <a class="glyphicon  glyphicon-remove" flag2="@i" role="menuitem" tabindex="-1" style="width: 80px; cursor: pointer;" onclick="DelPic(this)"> 删除图片</a>
                            </div>
                        }
                    }
                }
            </div>
            <input type="hidden" id="urls" name="urls" value="@urls" />
        </div>
    </div>
</form>
<script>
    function UpdateSinglePic() {
        $("#file1").click();
    }

    ///////////////
    function ViewPic(index) {
        var arry = new Array();
        $("img[flag='group4']").each(function () {
            var obj = {};
            obj.alt = $("#P_ChineseName").val();
            obj.pid = 1;
            obj.src = $(this).attr("src");
            obj.thumb = $(this).attr("src");
            arry.push(obj);
        });

        var json = {
            "title": $("#P_ChineseName").val() + "的图片预览", //相册标题
            "id": 123, //相册id
            "start": index, //初始显示的图片序号，默认0
            "data": arry
        }
        layer.photos({
            photos: json //格式见API文档手册页
            , shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }
    function OpenWindow() {
        top.layer.open({
            id: "UploadPic",
            title: "图片上传",
            content: "/Shop/UploadPic",
            area: ["800px", "580px"],
            shade: 0.3,
            type: 2,
            fix: false,
            btn: ['确认', '关闭'],
            btnclass: ['btn btn-primary', 'btn btn-danger'],
            yes: function (index, layero) {
                var tem = $(layero).find("iframe")[0].contentWindow.getUrls();
                PicCallBack(tem);
                parent.layer.close(index);
            }, cancel: function () {
                return true;
            }
        });
    }

    function PicCallBack(ArryUrl) {
        var imgs_str = "";
        for (i = 0; i < ArryUrl.length; i++) {
            var temurl = GetPicDomin + ArryUrl[i];
            imgs_str += '<div class="col-xs-6 col-md-3"><img flag="group4" flag1="' + ($("img[flag='group4']").length + i) + '" src="' + temurl + '" alt="..." class="img-thumbnail" style="width:400px; height: 200px;" />  <a class="glyphicon glyphicon-remove" flag1="' + ($("img[flag='group4']").length + i) + '" role="menuitem" tabindex="-1" style="width: 80px; cursor: pointer; " onclick="DelPic(this)"> 删除图片</a></div>';
        }
        $("#imgs").append(imgs_str);
        if ($("#urls").val().trim() != "") {
            $("#urls").val($("#urls").val() + "," + ArryUrl.join(","));
        }
        else {

            $("#urls").val(ArryUrl.join(","));
        }
        initPicBox();//重新绑定事件
    }
    function initPicBox()//初始化图片窗口
    {
        $("img[flag='group4']").each(function () {
            $(this).click(function () {
                var tem = parseInt($(this).attr("flag1"));
                ViewPic(tem);
                //$(".group4").eq(tem).click();
            });
        });
    }

    function DelPic(obj) {
        var temurl = $(obj).prev().attr("src");
        var delurl = temurl.substring(temurl.lastIndexOf('/') + 1);
        $.ajax({
            url: "/PicUpload/DelPic",
            data: { url: delurl },
            dataType: "json",
            async: false,
            success: function (data) {
                var tem = $("#urls").val().trim()
                var newarry = new Array();
                if (tem != "") {
                    var arry = tem.trim().split(',');
                    for (var i = 0; i < arry.length; i++) {
                        if (arry[i].indexOf(delurl) == -1) {
                            newarry.push(arry[i]);
                        }
                    }
                    $("#urls").val(newarry.join(","));
                }

                $(obj).parent().remove();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    }
    function SelectMap() {
        top.layer.open({
            id: "SelectMap",
            title: "选择经纬度",
            content: "/Shop/SetMap",
            area: ["800px", "580px"],
            shade: 0.3,
            type: 2,
            fix: false,
            btn: ['确认', '关闭'],
            btnclass: ['btn btn-primary', 'btn btn-danger'],
            yes: function (index, layero) {
                var tem = $(layero).find("iframe")[0].contentWindow.Point();
                SetPoint(tem);
                parent.layer.close(index);
            }, cancel: function () {
                return true;
            }
        });
    }
    function SetPoint(tempot) {
        $("#Lng").val(tempot[0]);
        $("#Lat").val(tempot[1]);
    }
</script>